<template>
	<view>
		<view class="search-box">
			<image class="search-img1" src="@/static/images/xiangzuo.png" alt="" @tap="goBack"></image>
			<view class="search">
				<image class="search-img2" src="@/static/images/sousuo1.png" alt="" @tap="getResult"></image>
				<input class="search-input" type="text" placeholder="大家都在搜:石材普工" v-model="keyword">
			</view>
		</view>

		<view class="video-list">
			<view class="recom-video" @tap="goTuijian">
				<image class="video-style" src="@/pages5/static/images/tuijianshipin.png" mode=""></image>
				<text>最新视频</text>
			</view>
			<view class="free-video" @tap="goFree">
				<image class="video-style" src="@/static/images/mianfeishipin.png" mode=""></image>
				<text>免费视频</text>
			</view>
			<view class="hot-video" @tap="goHot">
				<image class="video-style" src="@/static/images/remenjiaocheng.png" mode=""></image>
				<text>热门教程</text>
			</view>
			<view class="cate-video" @tap="goCate">
				<image class="video-style" src="@/static/images/shipinfenlei.png" mode=""></image>
				<text>视频分类</text>
			</view>
		</view>


		<!-- <view class="video-cate" style="height: 490upx;position: relative;">
			<view class="video-cate-text">
				<image class="video-cate-text-img" src="@/static/images/juxing.png"></image>
				<text>最新视频</text>
			</view>
			<view class="video-cate-imgs" v-if="recomVideosCount > 0">
				<view class="video-cate-imgs-content" v-for="item in VideosData.recom_videos" :key="item.id"
					@tap="checkInfo(item.id)">
					<image class="video-cate-img" :src="item.cover_url" mode=""></image>
					<view class="" style="position: absolute;top:52upx;left:38upx;font-size: 30upx;color: #fff;">
						{{item.positin_name}}
					</view>
					<view class="check-info">查看视频</view>
				</view>
			</view>

			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view> -->

		<!-- <view class="video-cate" style="height: 764upx;background-color: #F7F7F7;padding-top: 36upx;position: relative;">
			<view class="video-cate-text">
				<image class="video-cate-text-img" src="@/static/images/juxing.png"></image>
				<text>免费视频</text>
			</view>
			<view class="video-cate-imgs" v-if="freeVideosCount > 0">
				<view class="video-cate-imgs-content" style="height:333upx" v-for="item in VideosData.free_videos"
					:key="item.id">
					<view class="video-cate-imgs-box">
						<image class="video-cate-img" :src="item.cover_url" mode=""
							style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;"
							@tap="checkInfo(item.id)"></image>
						<view class="video-title" @tap="checkInfo(item.id)">
							{{item.title}}
						</view>
						<view class="video-detail">
							<text style="color:#F3431A">免费</text>
							<text style="color:#545556">{{item.view_num}}人学习</text>
						</view>
					</view>
				</view>
			</view>

			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view> -->

		<!-- <view class="video-cate" style="height: 386upx;padding-top: 30upx;position: relative;">
			<view class="video-cate-text">
				<image class="video-cate-text-img" src="@/static/images/juxing.png"></image>
				<text>热门教程</text>
			</view>
			<view class="video-cate-imgs3" v-if="hotVideosCount > 0">
				<view class="video-cate-content3" style="height:226upx;width:200upx;font-size: 30upx;"
					v-for="item in VideosData.hot_videos" :key="item.id" @tap="checkInfo(item.id)">
					<image class="video-cate-img3" :src="item.cover_url" mode="" style="height:180upx;width: 200upx;">
					</image>
					<view class="video-title3">
						{{item.title}}
					</view>
				</view>
			</view>

			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view> -->

		<view class="videos-list">
			<view class="videos-item" v-for="(item,index) in VideosData" :key="item.id" style="position: relative;">
				
				<view class="titles">
					<text class="title">{{item.title}}</text>
					<view class="titled" @tap="checkInfo(item.id)">
						进入详情
					</view>
				</view>
				<video v-if="isIos === false" class="videos-item-img" :title="item.title" :src="item.video_url"
					:poster="item.cover_url" :object-fit="objectFit" :controls="true" :show-center-play-btn="true"
					:show-play-btn="true" :http-cache="true" @play="play(index,item.id)" :id="`video_${index}`"
					:show-fullscreen-btn="true">
				</video>

				<view v-if="isIos === true" class="videos-item-img" style="position: relative;margin-bottom: 12upx;"
					@tap="checkInfo(item.id)">
					<image :src="item.cover_url" mode="scaleToFill" style="width: 100%;height: 100%" lazy-load="true">
					</image>
					<image src="@/static/images/play-video.png"
						style="width: 64upx;height: 64upx;position: absolute;left: calc(50% - 32upx);top:163upx">
					</image>
				</view>

				
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import empty from "@/components/empty";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	export default {
		data() {
			return {
				objectFit: 'fill',
				title: '',
				keyword: '',
				isLoaded: false,
				isIos: false,
				page: 1,
				VideosData: [],
				totalNum: 0,

				loadingType: 'more', //加载更多状态
				// recomVideosCount: 0,
				// freeVideosCount: 0,
				// hotVideosCount: 0,
			}
		},

		components: {
			uniLoadMore,
			empty
		},

		computed: {
			...mapState(['hasLogin'])
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			this.getVideos();
			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)

		},

		//下拉到底获取新的数据
		onReachBottom() {
			this.loadData()
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform === 'ios') {
				this.isIos = true;
			}
			// #endif

			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			async loadData() {
				this.getVideos();
			},

			async getResult() {
				let keyword = this.keyword.trim();
				if (!keyword) {
					this.$api.msg('请输入搜索内容')
					this.keyword = ''
					return false;
				}

				this.page = 1;
				this.VideosData = []
				let dataObj = {};
				dataObj.keyword = this.keyword;
				this.getVideos(dataObj)
			},

			// async getVideos(dataObj = {}) {
			// 	let vdata = await this.$myRequest({
			// 		url: '/videos',
			// 		data: dataObj,
			// 		methods: "POST"
			// 	})
			// 	// console.log(vdata.data.data);
			// 	this.VideosData = vdata.data.data;
			// 	if (this.VideosData.recom_videos.length > 0) {
			// 		this.recomVideosCount = this.VideosData.recom_videos.length
			// 	}
			// 	if (this.VideosData.free_videos.length > 0) {
			// 		this.freeVideosCount = this.VideosData.free_videos.length
			// 	}
			// 	if (this.VideosData.hot_videos.length > 0) {
			// 		this.hotVideosCount = this.VideosData.hot_videos.length
			// 	}
			// },

			async getVideos(dataObj = {}) {
				if (this.loadingType == 'noMore') {
					return false;
				}
				dataObj.page = this.page
				let vdata = await this.$myRequest({
					url: '/all_videos',
					data: dataObj,
					methods: "POST"
				})

				if (vdata.data.status == 1) {
					this.totalNum = vdata.data.data.total_num
					let ndata = vdata.data.data.list;

					if (ndata.length > 0) {
						this.VideosData = [...this.VideosData, ...ndata];
						if (this.totalNum > this.VideosData.length) {
							this.page = this.page + 1;
						} else {
							this.loadingType = 'noMore';
						}
					} else {
						this.loadingType = 'noMore';
					}
				}
			},
			
			// 添加播放次数
			async addViewNum(id) {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return false;
				}

				await this.$myRequest({
					url: '/addVideoNum',
					data: {
						video_id: id
					},
					methods: 'post'
				})
			},

			async checkInfo(id) {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return false;
				}
				
				this.addViewNum(id)
				let _this = this;

				_this.VideosData.forEach((item, index) => {
					// 暂停其余视频
					uni.createVideoContext(`video_${index}`, _this).pause(); //暂停视频播放事件
				})

				uni.navigateTo({
					url: '/pages5/pages/videos/video-detail?id=' + id
				})
			},

			goTuijian() {
				uni.pageScrollTo({
					scrollTop: 180,
					duration: 150
				})
			},

			goFree() {
				uni.pageScrollTo({
					scrollTop: 435,
					duration: 150
				})
			},

			goHot() {
				uni.pageScrollTo({
					scrollTop: 435,
					duration: 150
				})
			},

			goCate() {
				uni.navigateTo({
					url: '/pages5/pages/videos/videos-cate'
				})
			},

			//播放视频
			play(currentIndex, id) {
				this.addViewNum(id)
				let _this = this;

				//播放当前视频
				uni.createVideoContext(`video_${currentIndex}`, _this).play();
				_this.VideosData.forEach((item, index) => {
					// 获取json对象并遍历, 停止非当前视频
					if (currentIndex != index) {
						// 暂停其余视频
						uni.createVideoContext(`video_${index}`, _this).pause(); //暂停视频播放事件
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.search-box {
		// #ifdef APP-PLUS
		padding: 132rpx 30rpx 0;
		// #endif

		// #ifdef H5
		padding: 80rpx 36rpx 0;
		// #endif

		// #ifdef MP-WEIXIN
		padding: 132rpx 30rpx 0;
		// #endif

		display: flex;
		align-items: center;
		justify-content: space-between;

		.search-img1 {
			float: right;
			width: 17rpx;
			height: 30rpx;
			margin-right: 4rpx;
		}

		.search {
			/* margin-bottom: 28rpx; */
			height: 68rpx;
			line-height: 68rpx;
			width: 606rpx;
			display: flex;
			align-items: center;
			/* justify-content: space-between; */
			border-radius: 10rpx;
			/* margin-left: 12%; */
			background-color: #fff;
			border: 1px solid #f3f3f6;
			padding: 0 13upx;

			.search-input {
				height: 58rpx;
				font-size: 26rpx;
				padding-left: 29upx;
				background-color: #fff;
				border-radius: 23.5upx;
				width: 72%;
			}

			.search-img2 {
				float: right;
				width: 25rpx;
				height: 25rpx;
				margin-right: 4rpx;
			}
		}
	}

	.video-list {
		display: flex;
		height: 212upx;
		padding: 45rpx 36rpx;
		font-size: $font-base;

		.video-style {
			width: 86upx;
			height: 72upx;
			padding-bottom: 5upx;
		}

		.recom-video,
		.free-video,
		.hot-video,
		.cate-video {
			width: 25%;
			display: flex;
			flex-direction: column;
			/* justify-content: center; */
			align-items: center;
		}
	}

	/* .video-cate {
		/* height: 490upx; */
	/* padding: 0 36rpx;

		.video-cate-text {
			display: flex;
			align-items: center;
			font-size: $font-base;
		}

		.video-cate-text-img {
			width: 5upx;
			height: 28upx;
			margin-right: 16upx;
		}

		.video-cate-imgs { */
	/* height: 462upx; */
	/* padding-top: 35upx;

			.video-cate-imgs-content {
				position: relative;
				display: inline-block;
				width: 320upx;
				height: 214upx;

				&:nth-child(2n+1) {
					margin-right: 38upx;
				}
			}

			.video-cate-imgs-box {
				height: 298upx;
				font-size: $font-base;
			}

			.video-cate-img {
				width: 320upx;
				height: 180upx;
				border-radius: 15upx;
			}

			.video-title {
				height: 59upx;
				line-height: 59upx;
				width: 100%;
				word-break: keep-all;
				/* 不换行 */
	/* white-space: nowrap; */
	/* 不换行 */
	/* overflow: hidden; */
	/* 内容超出宽度时隐藏超出部分的内容 */
	/* text-overflow: ellipsis;

				background-color: #FFFFFF;
				padding: 0 12upx;
			}

			.video-detail {
				height: 59upx;
				line-height: 59upx;
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 0 12upx;
				border-bottom-left-radius: 15upx;
				border-bottom-right-radius: 15upx;
			}
		}
	}

	.check-info {
		position: absolute;
		top: 104upx;
		left: 38upx;
		font-size: 24upx;
		color: #545556;
		width: 120upx;
		height: 42upx;
		border-radius: 21upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	} */

	/* .video-cate-imgs3 {
		padding-top: 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.video-cate-img3 {
		border-radius: 15upx;
	}

	.video-title3 {
		width: 100%;
		word-break: keep-all;
		/* 不换行 */
	/* white-space: nowrap; */
	/* 不换行 */
	/* overflow: hidden; */
	/* 内容超出宽度时隐藏超出部分的内容 */
	/* text-overflow: ellipsis; */
	/* } */

	.videos-list {
		padding: 0 36upx;
		width: 100%;

		.videos-item {
			height: 484upx;

			.videos-item-img {
				height: 390upx;
				width: 100%;
			}

			.titles {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 6px;
			}

			.title {
				font-size: $font-base;
			}

			.titled {
				background-color: $base-color;
				padding: 6upx 10upx;
				font-size: 28upx;
				color: #fff;
				border-radius: 8upx;
				letter-spacing: 4upx;
			}
		}
	}

	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.empty-img {
			width: 182rpx;
			height: 182rpx;
		}
	}
</style>